<template>
  <section class="ProjectList-container">
    <el-table :data="projects" style="width: 100%" size="medium" @select="select" @select-all="allSelect">
      <el-table-column type="selection" width="55" />
      <el-table-column width="120">
        <template slot="header">
          <slot name="action-bar">
            <i class="iconfont icon-icon_xinzeng" />
          </slot>
        </template>
        <template slot-scope="scope">
          <slot name="row-action-bar" :row="scope.row"></slot>
        </template>
      </el-table-column>
      <el-table-column label="基本信息" width="400" class-name="projectname">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="12">
              {{ scope.row.no }}
            </el-col>
            <el-col :span="12" style="display: flex; justify-content: flex-end">
              <span>{{ scope.row.begin_date }}</span>
              <span>~</span>
              <span>{{ scope.row.end_date }}</span>
            </el-col>
          </el-row>
          <div @click="showDetail(scope.row.id)">
            <h1 class="project_name">
              {{ scope.row.name }}
            </h1>
          </div>
          <el-row :gutter="0">
            <el-progress :percentage="scope.row.progress > 0 ? scope.row.progress : 0" :stroke-width="2"></el-progress>
          </el-row>
          <div :gutter="0" style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            ">
            <div style="width: 200px; display: flex">
              <!-- <div class="quick-icon-button">
                <slot name="row-priority" :row="scope.row"></slot>
                <span>{{ scope.row.priority }}</span>
              </div> -->
              <div class="quick-icon-button">
                <slot name="row-member" :row="scope.row"></slot>
                <!-- <span>{{ getMember(scope.row.id) }}</span> -->
              </div>
            </div>
            <div style="display: flex; justify-content: flex-end; width: 100px">
              <el-tag v-if="scope.row.status == 0" type="info">
                {{ scope.row.status_name }}
              </el-tag>
              <el-tag v-if="scope.row.status == 1" type="danger">
                {{ scope.row.status_name }}
              </el-tag>
              <el-tag v-if="scope.row.status == 2" type="success">
                {{ scope.row.status_name }}
              </el-tag>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="stage" label="阶段">
        <template slot-scope="scope">
          <span v-if="scope.row.stage == 0"> 报价 </span>
          <span v-else-if="scope.row.stage == 1"> 调研 </span>
          <span v-else-if="scope.row.stage == 2"> 排期 </span>
          <span v-else-if="scope.row.stage == 3"> 开发 / 实施 </span>
          <span v-else-if="scope.row.stage == 4"> 测试 </span>
          <span v-else-if="scope.row.stage == 5"> 上线 </span>
          <span v-else-if="scope.row.stage == 6"> 收款 </span>
        </template>
      </el-table-column>
      <el-table-column prop="leader_name" label="负责人"></el-table-column>
      <el-table-column prop="channel_name" label="渠道"></el-table-column>
      <el-table-column prop="customer_name" label="客户名称"></el-table-column>
      <el-table-column prop="remark" label="描述"></el-table-column>
      <el-table-column prop="create_date" label="创建信息">
        <template slot-scope="scope">
          <el-row>
            {{ scope.row.creator_name }}
          </el-row>
          <el-row>
            {{ scope.row.create_date }}
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
import _member from "../../common/api/project_member";
export default {
  props: ["projects"],
  data() {
    return {
      loading: false,
      selection: [],
      allSelection: [],
    };
  },
  computed: {},
  methods: {
    showDetail(id) {
      const { href } = this.$router.resolve({
        path: `/projectdetail/${id}`,
      });
      window.open(href, "_blank");
    },

    select(selection) {
      this.$emit("selection", selection);
    },

    allSelect(selection) {
      this.$emit("allSelect", selection);
    },
  },
  mounted() { },
};
</script>

<style scoped lang="scss">
.ProjectList-container {
  .name-panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: auto;

    .icon {
      background: white;
      padding: 2px;
      margin-left: 2px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 0.2rem #999;
      overflow: hidden;
    }

    .content {
      margin-left: 10px;

      .title {
        font-size: 2rem;
        margin-bottom: 5px;
        font-weight: bold;
      }

      // .tag {
      // }

      .name-admin {
        margin-right: 5px;
      }
    }
  }
}

i {
  cursor: pointer;
}

.projectname {
  .el-row {
    margin: 20px 0;
  }
}

.quick-icon-button {
  display: flex;
  align-items: center;
}

.project_name {
  text-align: center;
  font-weight: 600;
  font-size: 1.5rem;
  cursor: pointer;

  &:hover {
    color: #409eff;
  }
}
</style>
